import React, { memo, useEffect,  } from 'react'
import { useDispatch,useSelector,shallowEqual } from 'react-redux'

import HomeBanner from './c-cpns/home-banner'
import { HomeWrapper } from './style'
import { fetchhomedata } from "@/store/modules/home"
import SectionHeader from '@/components/section-header'
import RoomItem from '@/components/room-item'
import Father from '../demo/子传父/Father'
import Contenter from '../demo/ref_DOM/Contenter'
import Demo from '../demo/index'



const Home = memo(() => {
  // 这里发起 网络 请求
 const dispatch = useDispatch()
  useEffect(()=>{
    // 这个 dispatch 派发的是一个异步请求 并不是真正的 action 去修改 state
    dispatch(fetchhomedata("我是参数"))
  },[dispatch])

  // 获取 home 异步请求过来的数据 
  // shallowEqual 这里使用 useSelector 需要进行 shallowEqual 进行浅拷贝
  const {goodPriceInfo} =  useSelector((state)=>({
    goodPriceInfo:state.home.goodPriceInfo
  }),shallowEqual)


  return (
    <HomeWrapper>
      <HomeBanner/>
      <div className="content">
        <div className="good-price">
          <SectionHeader title={goodPriceInfo.title} subtitle={goodPriceInfo.subtitle} />
          {/* <ul className='room-list'>
            { goodPriceInfo.list?.slice(0,8).map(item =>{
              return <RoomItem  key={item} itemData={item}/>
            })}
          </ul> */}
        </div>
        <div className='footer'>
          <Father/>
          <Contenter/>
          <Demo/>
        </div>
      </div>
    </HomeWrapper>
  )
})

export default Home